//import React from 'react';
//import Tab from "react-bootstrap/lib/Tab";
//import Button from "react-bootstrap/lib/Button";
//import HttpRequest from '../HttpRequest.js';
//import OrderList from './orderList.jsx';
//import ListItem from 'material-ui/lib/lists/list-item';
//import FlatButton from 'material-ui/lib/flat-button';
//import ListGroup from 'react-bootstrap/lib/ListGroup';
//import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';
//import Glyphicon from 'react-bootstrap/lib/Glyphicon';
//import WorkspaceManage from "./../workspace/workspaceManage.jsx";
//import Modal from "react-bootstrap/lib/Modal";
//import Input from "react-bootstrap/lib/Input";
//import Panel from "react-bootstrap/lib/Panel"
//
//const data = [{
//    "datasource": {
//        "name": "xinao",
//        "location": "jdbc:mysql://10.2.9.96:3306/xinao",
//        "user": "root",
//        "password": "OBF:glfvvLio",
//        "login_timeout_ms": "10000",
//        "command_timeout_ms": "0",
//        "max_connections": "200",
//        "min_connections": "5",
//        "idle_life_ms": "10000"
//    }
//},
//    {
//        "datasource": {
//            "name": "bcp.store",
//            "location": "jdbc:oracle:thin:@10.2.9.199:1521:ORA10",
//            "user": "tan",
//            "password": "tan",
//            "login_timeout_ms": "10000",
//            "command_timeout_ms": "0",
//            "max_connections": "200",
//            "min_connections": "5",
//            "idle_life_ms": "10000"
//        }
//    }
//]
//
//var DataSourceManageTab = React.createClass({
//
//    getInitialState: function () {
//        return ({
//            current_project: this.props.current_project,
//            ListData: data,
//            ListItems: [],
//            current_selected: null,
//            dialog_open: false,
//            advanced_settings: false,
//            data_source_info: null
//        });
//    },
//    componentWillReceiveProps: function (newProps) {
//        this.setState({
//            current_project: newProps.current_project,
//        }, function () {
//            this.componentDidMount();
//        });
//    },
//    componentDidMount: function () {
//        this.setState({
//            ListData: data,
//            current_selected:data[0]
//        }, function () {
//            this._renderItemList();
//        });
//    },
//    itemSelected:function(){
//
//    },
//    _renderItemList: function () {
//        var items = [];
//        this.state.ListData.map(function (item) {
//            items.push(
//                <ListGroupItem style={{whiteSpace:"nowrap"}}>
//                    <i className="fa fa-database"/>
//                    {" " + item.datasource.name}
//                    <span  style={{float:"right",fontSize:"14px"}}><i className="fa fa-trash-o"/></span>
//                </ListGroupItem>
//            );
//        }.bind(this));
//        this.setState({
//            ListItems: items
//        });
//    },
//    renderOracleThin:function(data){
//        var data_source_info = data.datasource.location.split(":");
//        if(data_source_info.length > 0){
//
//        }
//      return (
//          <div
//              style={{height:"100%",margin:"20px 20px",padding:"10px 10px",overflowY:"auto"}}>
//              数据源名称：<Input placeholder="请输入数据源名称"  bsSize="small" type="text"/>
//              服务地址：<Input placeholder="请输入服务地址"   bsSize="small" type="text"/>
//              服务端口：<Input placeholder="请输入服务端口"   bsSize="small" type="text" defaultValue="1512"/>
//              SID：<Input placeholder="请输入SID"   bsSize="small" type="text"/>
//              用户名：<Input placeholder="请输入用户名"  bsSize="small" type="text"/>
//              密码：<Input placeholder="请输入密码"  bsSize="small" type="text"/>
//              <Button onClick={()=>{document.getElementById("advanced").style.display = "block"}}
//                      bsStyle="primary">查看高级设置</Button>
//              <Button onClick={()=>{document.getElementById("advanced").style.display = "none"}}
//                      bsStyle="primary">隐藏高级设置</Button>
//              <div id="advanced" style={{display:"none"}}>
//                  最小连接数：<Input placeholder="请输入最小连接数" bsSize="small" type="text" defaultValue="5"/>
//                  最大连接数：<Input placeholder="请输入最大连接数" bsSize="small" type="text" defaultValue="200"/>
//                  数据库链接超时(ms)：<Input placeholder="请输入数据库链接超时(ms)" bsSize="small" type="text"
//                                     defaultValue="10000"/>
//                  SQL执行超时(ms)：<Input placeholder="请输入SQL执行超时(ms)" bsSize="small" type="text"
//                                     defaultValue="0"/>
//                  连接空闲时间(ms)：<Input placeholder="请输入连接空闲时间(ms)" bsSize="small" type="text"
//                                    defaultValue="10000"/>
//                  绑定空间：<Input placeholder="请输入绑定空间" bsSize="small" type="text"/>
//              </div>
//          </div>
//      )
//    },
//    renderOracleThinRAC:function(data){
//       return(
//           <div
//               style={{height:"100%",margin:"20px 20px",padding:"10px 10px",overFlowY:"auto"}}>
//               数据源名称：<Input placeholder="请输入数据源名称" bsSize="small" type="text"/>
//               RAC服务名：<Input placeholder="请输入服务地址" bsSize="small" type="text"/>
//               用户名：<Input placeholder="请输入用户名" bsSize="small" type="text"/>
//               密码：<Input placeholder="请输入密码" bsSize="small" type="text"/>
//               RAC节点：<Input type="text" placeholder="[地址1:端口1];[地址2:端口2]..."/>
//               <Button onClick={()=>{document.getElementById("advanced").style.display = "block"}}
//                       bsStyle="primary">查看高级设置</Button>
//               <Button onClick={()=>{document.getElementById("advanced").style.display = "none"}}
//                       bsStyle="primary">隐藏高级设置</Button>
//               <div id="advanced" style={{display:"none"}}>
//                   最小连接数：<Input placeholder="请输入最小连接数" bsSize="small" type="text" defaultValue="5"/>
//                   最大连接数：<Input placeholder="请输入最大连接数" bsSize="small" type="text" defaultValue="200"/>
//                   数据库链接超时(ms)：<Input placeholder="请输入数据库链接超时(ms)" bsSize="small" type="text"
//                                      defaultValue="10000"/>
//                   SQL执行超时(ms)：<Input placeholder="请输入SQL执行超时(ms)" bsSize="small" type="text"
//                                      defaultValue="0"/>
//                   连接空闲时间(ms)：<Input placeholder="请输入连接空闲时间(ms)" bsSize="small" type="text"
//                                     defaultValue="10000"/>
//                   绑定空间：<Input placeholder="请输入绑定空间" bsSize="small" type="text"/>
//               </div>
//           </div>
//       )
//    },
//    renderOracleOCIThinRAC:function(data){
//        return(
//            <div
//                style={{height:"100%", margin:"20px 20px",padding:"10px 10px",overFlowY:"auto"}}>
//                数据源名称：<Input placeholder="请输入数据源名称" bsSize="small" type="text"/>
//                SID：<Input placeholder="请输入SID" bsSize="small" type="text"/>
//                用户名：<Input placeholder="请输入用户名" bsSize="small" type="text"/>
//                密码：<Input placeholder="请输入密码" bsSize="small" type="text"/>
//                <Button onClick={()=>{document.getElementById("advanced").style.display = "block"}}
//                        bsStyle="primary">查看高级设置</Button>
//                <Button onClick={()=>{document.getElementById("advanced").style.display = "none"}}
//                        bsStyle="primary">隐藏高级设置</Button>
//                <div id="advanced" style={{display:"none"}}>
//                    最小连接数：<Input placeholder="请输入最小连接数" bsSize="small" type="text" defaultValue="5"/>
//                    最大连接数：<Input placeholder="请输入最大连接数" bsSize="small" type="text" defaultValue="200"/>
//                    数据库链接超时(ms)：<Input placeholder="请输入数据库链接超时(ms)" bsSize="small" type="text"
//                                       defaultValue="10000"/>
//                    SQL执行超时(ms)：<Input placeholder="请输入SQL执行超时(ms)" bsSize="small" type="text"
//                                       defaultValue="0"/>
//                    连接空闲时间(ms)：<Input placeholder="请输入连接空闲时间(ms)" bsSize="small" type="text"
//                                      defaultValue="10000"/>
//                    绑定空间：<Input placeholder="请输入绑定空间" bsSize="small" type="text"/>
//                </div>
//            </div>
//        )
//    },
//    open_advanced_settings: function () {
//        this.setState({
//            advanced_settings: !this.state.advanced_settings
//        })
//    },
//    handleOpen: function () {
//        this.setState({
//            dialog_open: true
//        });
//    },
//    handleClose: function () {
//        this.setState({dialog_open: false});
//    },
//    save:function(data){
//
//        //当前选中：1.新建（无_id） 2.修改(有_id)
//        //if(this.state.current_selected._id){
//        //    //update
//        //}else{
//        //    HttpRequest.addDataSource(data).success().error()
//        //    //post
//        //}
//    },
//    addDataSource: function (type) {
//        this.state.ListData.splice(0,0,{
//            "datasource": {
//                "name": "新增数据源",
//                "location": "",
//                "user": "",
//                "password": "",
//                "login_timeout_ms": "10000",
//                "command_timeout_ms": "0",
//                "max_connections": "200",
//                "min_connections": "5",
//                "idle_life_ms": "10000"
//            }
//        });
//        this._renderItemList();
//        switch (type) {
//            case "Oracle_JDBC_Thin_driver":
//            {
//                this.setState({
//                    data_source_info:this.renderOracleThin(this.state.current_selected)
//                });
//                break;
//            }
//            case "Oracle_JDBC_Thin_driver_RAC":
//            {
//                this.setState({
//                    data_source_info:this.renderOracleThinRAC(this.state.current_selected)
//                });
//                break;
//            }
//            case "Oracle_OCI_Thin_driver":
//            {
//                this.setState({
//                    data_source_info:this.renderOracleOCIThinRAC(this.state.current_selected)
//                });
//                break;
//            }
//            default :
//            {
//                this.setState({
//                    data_source_info: <div
//                        style={{height:"100%",margin:"20px 20px",padding:"10px 10px",overflowY:"auto"}}>
//                        数据源名称：<Input placeholder="请输入数据源名称" bsSize="small" type="text"/>
//                        服务地址：<Input placeholder="请输入服务地址" bsSize="small" type="text"/>
//                        服务端口：<Input placeholder="请输入服务端口" bsSize="small" type="text" defaultValue="1512"/>
//                        数据库：<Input placeholder="请输入数据库" bsSize="small" type="text"/>
//                        用户名：<Input placeholder="请输入用户名" bsSize="small" type="text"/>
//                        密码：<Input placeholder="请输入密码" bsSize="small" type="text"/>
//                        <Button onClick={()=>{document.getElementById("advanced").style.display = "block"}}
//                                bsStyle="primary">查看高级设置</Button>
//                        <Button onClick={()=>{document.getElementById("advanced").style.display = "none"}}
//                                bsStyle="primary">隐藏高级设置</Button>
//                        <div id="advanced" style={{display:"none"}}>
//                            最小连接数：<Input placeholder="请输入最小连接数" bsSize="small" type="text" defaultValue="5"/>
//                            最大连接数：<Input placeholder="请输入最大连接数" bsSize="small" type="text" defaultValue="200"/>
//                            数据库链接超时(ms)：<Input placeholder="请输入数据库链接超时(ms)" bsSize="small" type="text"
//                                               defaultValue="10000"/>
//                            SQL执行超时(ms)：<Input placeholder="请输入SQL执行超时(ms)" bsSize="small" type="text"
//                                               defaultValue="0"/>
//                            连接空闲时间(ms)：<Input placeholder="请输入连接空闲时间(ms)" bsSize="small" type="text"
//                                              defaultValue="10000"/>
//                            绑定空间：<Input placeholder="请输入绑定空间" bsSize="small" type="text"/>
//                        </div>
//                        <Button onClick={this.save}
//                                bsStyle="primary">保存</Button>
//                    </div>
//                });
//                break;
//            }
//        }
//        this.handleClose();
//    },
//    render() {
//
//        return (
//            <div style={{width:"100%"}}>
//                <div className="content_pageLeft">
//                    <ListGroup style={{width:"100%",padding:"20px 20px"}}>
//                        <ListGroupItem style={{backgroundColor:"#ccc"}}><i className="fa fa-database"/>
//                            数据源</ListGroupItem>
//                        {this.state.ListItems}
//                        <ListGroupItem onClick={this.handleOpen}><Glyphicon glyph="plus"/> 添加</ListGroupItem>
//                    </ListGroup>
//                    <Modal
//                        show={this.state.dialog_open}
//                    >
//                        <Modal.Header>
//                            <Modal.Title >新建数据源</Modal.Title>
//                        </Modal.Header>
//                        <Modal.Body>
//                            <div>
//                                选择数据源驱动类型
//                                <Input type="select" ref="data_source_driver_type">
//                                    <option value="DB2">DB2</option>
//                                    <option value="DM">DM</option>
//                                    <option value="MS_SQL_Server">MS SQL Server</option>
//                                    <option value="MySQL">MySQL</option>
//                                    <option value="Oracle_JDBC_Thin_driver">Oracle (JDBC Thin driver)</option>
//                                    <option value="Oracle_JDBC_Thin_driver_RAC">Oracle (JDBC Thin driver) RAC</option>
//                                    <option value="Oracle_OCI_Thin_driver">Oracle (OCI Thin driver)</option>
//                                </Input>
//                            </div>
//                        </Modal.Body>
//                        <Modal.Footer>
//                            <Button onClick={this.handleClose}
//                                    style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
//                                    bsStyle="primary">取消</Button>
//                            <Button onClick={()=>{this.addDataSource(this.refs['data_source_driver_type'].getValue())}}
//                                    style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
//                                    bsStyle="primary">完成</Button>
//                        </Modal.Footer>
//                    </Modal>
//                </div>
//                <div className="content_pageRight">
//                    {this.state.data_source_info}
//                </div>
//            </div>
//        );
//    }
//});
//
//export default DataSourceManageTab;